<template>
  <div class="drawer_box">
    <div class="btn_box" style="width: 20%;margin-top: 10px">
      <div
        @click="btnClick(item, index)"
        :class="{ isAtv: isIndexCv == index }"
        class="itemz flex_center_center"
        v-for="(item, index) in jqArrCv"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div style="width: 80%;margin-top: 10px;" >

     <div style="margin-bottom: 10px;">
      <el-select @change="chanse" v-model="valueSele" placeholder="选择" style="width: 240px">
      <el-option
        v-for="item in optionsS"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>

     </div>

     <ycsb v-if="valueSele == '罪犯情况'"  :selectValue="selectValue"  :jqArr="jqArr"/>

     <div v-if="valueSele == '民警工作情况'">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClickTab">
        <el-tab-pane label="重要通知" name="重要通知安排"></el-tab-pane>
        <el-tab-pane
          label="督察，反馈情况"
          name="督察情况，反馈情况"
        ></el-tab-pane>
        <el-tab-pane label="日常讲评" name="日常讲评情况"></el-tab-pane>
        <el-tab-pane label="安全隐患排查" name="安全隐患排查"></el-tab-pane>
        <el-tab-pane label="设施设备情况" name="设施设备情况"></el-tab-pane>
        <el-tab-pane label="夜间视频回放" name="夜间视频回放情况"></el-tab-pane>
      </el-tabs>

      <div class="box_wcl isTable">
        <el-table
          :data="ycqkList"
          fit
          highlight-current-row
          stripe
          height="760"
          style="width: 100%"
          border
        >
          <el-table-column prop="startDate" label="时间" align="center">
            <template #default="scope">
              <div>
                {{
                  scope.row.createDate.split("T")[0] +
                  " " +
                  scope.row.createDate.split("T")[1].split(":")[0] +
                  ":" +
                  scope.row.createDate.split("T")[1].split(":")[1]
                }}
              </div>
            </template>
          </el-table-column>

          <!--通知安排  -->
          <el-table-column
            prop="ld"
            label="内容"
            align="center"
            v-if="activeName == '重要通知安排'"
          >
            <template #default="scope">
              {{ scope.row.zyaptz }}
            </template>
          </el-table-column>

          <!-- 督察情况，反馈情况 -->
          <el-table-column
            v-if="activeName == '督察情况，反馈情况'"
            prop="ld"
            label="督察 存在问题"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.dcczwt }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="activeName == '督察情况，反馈情况'"
            prop="ld"
            label="督察 工作提示"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.dcgzts }}
            </template>
          </el-table-column>

          <!-- 讲评内容 -->
          <el-table-column
            v-if="activeName == '日常讲评情况'"
            prop="ld"
            label="讲评民警"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.jpmj }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="activeName == '日常讲评情况'"
            prop="ld"
            label="讲评内容"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.jpnr }}
            </template>
          </el-table-column>

          <!--安全隐患排查及设施设备情况  -->
          <el-table-column
            v-if="activeName == '安全隐患排查'"
            prop="ld"
            label="存在问题"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.aqczwt }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="activeName == '安全隐患排查'"
            prop="ld"
            label="上报及整改情况"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.aqsbqk }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName == '设施设备情况'"
            prop="ld"
            label="设备存在问题"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.sbczwt }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName == '设施设备情况'"
            prop="ld"
            label="上报及整改情况"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.sbsbqk }}
            </template>
          </el-table-column>

          <!--夜间视频回放情况  -->
          <el-table-column
            v-if="activeName == '夜间视频回放情况'"
            prop="ld"
            label="回看民警"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.hkmj }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="activeName == '夜间视频回放情况'"
            prop="ld"
            label="回看时段"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.hksd }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="activeName == '夜间视频回放情况'"
            prop="ld"
            label="监控点位"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.jkdw }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="activeName == '夜间视频回放情况'"
            prop="ld"
            label="存在问题"
            align="center"
          >
            <template #default="scope">
              {{ scope.row.hkczwt }}
            </template>
          </el-table-column>
        </el-table>
      </div>
     </div>

    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import http from "@/utils/api";
 import ycsb from "./ycsb.vue";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";
let activeName = ref("wcl");
const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Object,
    default: {},
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
const selectValue = ref("");
const valueSele = ref('罪犯情况')
const optionsS = ref([
  {
    label: "罪犯情况",
    value: "罪犯情况",
  },
  {
    label: "民警工作情况",
    value: "民警工作情况",
  },
]);
let daydata = ref("");

const emit = defineEmits(["childEvent"]);
let dateSfm = ref("");
let hour = ref("");

// 获取年月日 时
const getFormattedDateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");
  const seconds = String(now.getSeconds()).padStart(2, "0");
  dateSfm.value = `${hours}:${minutes}:${seconds}`;
  hour.value = String(now.getHours()).padStart(2, "0");
  daydata.value = `${year}-${month}-${day}`;

  return `${year}-${month}-${day} ${hour.value}`;
};

const handleClickTab = (tab) => {
  isIndex.value = tab.index;
  getExceptionReportSelect(tab.index);
};
let ycqkList = ref([]);
let isIndex = ref("0");
const getExceptionReportSelect = async (is = "0") => {
  let obj = {
    page: 1,
    limit: 99,
    orgId: selectValue.value,
    exceptType: "",
    startDate: "",
    endDate: "",
    state: "1,0",
    reportType: "",
  };
  let res = await http.znjw.WorkReportSelect(obj);
  if (!res) return;
  if (res.code == 0) {
    ycqkList.value = res.data.data.filter(
      (item) => item.type == activeName.value
    );
    // ycqkList.value = res.data.data.filter(
    //   (item) => item.type == activeName.value
    // );
  }
};

let jqArrCv = ref([]);
let isIndexCv = ref(0);
const btnClick = (item, index) => {
  selectValue.value = item.id;
  isIndexCv.value = index;
  getExceptionReportSelect(activeName.value);
};
let isShows = ref(false)
const chanse  = ()=>{

}

watch(
  () => props.jqArr,
  (newValue, oldValue) => {
    if (newValue) {
      if (props.jqArr) {
        jqArrCv.value = JSON.parse(JSON.stringify(props.jqArr));

        let allJq = jqArrCv.value.map((itz) => itz.id);
        selectValue.value = allJq.join(",");
        let allObj = {
          name: JSON.parse(sessionStorage.getItem('isUserInfo')).unitName,
          id: allJq.join(","),
        };
        jqArrCv.value.unshift(allObj);
      }
      getFormattedDateTime();
      getExceptionReportSelect();
      activeName.value = "重要通知安排";
    } else {
    }
  },
  {
    deep: true, // 深度监听
    immediate: true, // 立即触发回调
  }
);
</script>

<style scoped lang="scss">
::v-deep .el-tag.el-tag--info{
  background: #ff000000;
  color: white;
}
::v-deep .el-input.is-disabled .el-input__wrapper{
  background: #ffffff0d;
  box-shadow: none;
}
::v-deep .el-input__wrapper{
  background: #ffffff0d;
  box-shadow: none;
  color: white;
}
::v-deep .el-input__inner{
  color: white;
}
::v-deep .el-textarea__inner{
  background: #ffffff0d;
  box-shadow: none;
  color: white;
}
::v-deep .el-radio.el-radio--large .el-radio__label{
  color: white;
}

::v-deep .el-form-item__label{
  color: white !important;
}



.isAtv {
  background-color: rgb(4 110 250 / 27%) !important;
  font-weight: bold;
}

::v-deep .isTable .el-table {
  background-color: rgb(8, 32, 78) !important;
  .el-table tr {
    background-color: rgb(8, 32, 78) !important;
  }
  .cell {
    height: 30px;
    color: #fff;
    text-align: center;
    // border: 1px solid #ccc;
    background: rgb(8, 32, 78) !important;
    font-size: 12px;
    line-height: 30px;
  }
  .el-table__cell {
    border-color: 1px solid rgb(5, 112, 146);
    padding: 2px 0px !important;
    background: rgb(8, 32, 78) !important;
  }
  .el-table--fit .el-table__inner-wrapper:before {
    display: none !important;
  }
  .el-table th.el-table__cell.is-leaf {
    border: none !important;
  }
  --el-table-border-color: rgb(5, 112, 146);
}
.drawer_box {
  width: 100%;
  display: flex;

  height: 100%;
  box-sizing: border-box;
}
</style>
